<template>
  <!-- 购物车头部组件 -->
  <div id="CartTop">
    <catrtop />
  </div>
  <div style="display: flex; flex-direction: column; align-items: center;" id="Catalog">
    <table  style="width: 60%; background-color: #e9e9e9; border-collapse: collapse;" class="table-container">
      <tbody>   
         <tr>   
          <td style="font-weight: bold; border: 1px solid white;text-align: left;font-size: 25px;"
          colspan="2">
            Payment Details
          </td>
        </tr>
        <tr>   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            CartType
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            <select name="cartType" id="cartType" style="font-size: 25px;">
              <option value="cart">Cart</option>
              <option value="wishlist">Wishlist</option>
            </select>
          </td>
        </tr>

         <tr>   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Cartnumber:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            <input type="text" name="cartNumber" id="cartNumber" placeholder="Use a fake number"
            style="font-size: 25px;">
          </td>
        </tr>


        <tr>   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Expiry Date:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="expiryDate" id="expiryDate" placeholder="MM/YY" style="font-size: 25px;">
          </td>
        </tr>


        <tr>   
          <td style="font-weight: bold; border: 1px solid white;text-align: left;font-size: 25px;"
          colspan="2">
            Billing Address
          </td>
        </tr>

        <tr >   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            First Name:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="firstName" id="firstName" placeholder="First Name" style="font-size: 25px;">
          </td>:
        </tr>
          <tr >   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Last Name:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="lastName" id="lastName" placeholder="Last Name" style="font-size: 25px;">
          </td>:
        </tr>

         <tr >   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Address1:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="address1" id="address1"  style="font-size: 25px;">
          </td>
        </tr>

        <tr >
              <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Address2:
             </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="address2" id="address2"  style="font-size: 25px;">
          </td>
        </tr>

        <tr >   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            City:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="city" id="city"  style="font-size: 25px;">
          </td>
        </tr>
        <tr >   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            State:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="state" id="state"  style="font-size: 25px;">
          </td>
        </tr>

        <tr >   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Zip:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="zip" id="zip"  style="font-size: 25px;">
          </td>
        </tr>
        <tr >   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Country:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="country" id="country"  style="font-size: 25px;">
          </td>
        </tr>
        <!-- 勾选shoping address -->
         <tr v-if="checked1">   
          <td style="font-weight: bold; border: 1px solid white;text-align: left;font-size: 25px;"
          colspan="2">
            Shopping Address
          </td>
        </tr>
          <tr v-if="checked1">   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            First Name:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="shopfirstName" id="shopfirstName" placeholder="First Name" style="font-size: 25px;">
          </td>:
        </tr>
          <tr v-if="checked1">   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Last Name:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="shoplastName" id="shoplastName" placeholder="Last Name" style="font-size: 25px;">
          </td>:
        </tr>

         <tr v-if="checked1">   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Address1:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="shopaddress1" id="shopaddress1"  style="font-size: 25px;">
          </td>
        </tr>

        <tr v-if="checked1">
              <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Address2:
             </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="shopaddress2" id="shopaddress2"  style="font-size: 25px;">
          </td>
        </tr>

        <tr v-if="checked1">   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            City:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="shopcity" id="shopcity"  style="font-size: 25px;">
          </td>
        </tr>
        <tr v-if="checked1">   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            State:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="shopstate" id="shopstate"  style="font-size: 25px;">
          </td>
        </tr>

        <tr v-if="checked1">   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Zip:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="shopzip" id="shopzip"  style="font-size: 25px;">
          </td>
        </tr>
        <tr v-if="checked1">   
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
            Country:
          </td>
          <td style="border: 1px solid white;text-align: left;font-size: 25px;">
           <input type="text" name="shopcountry" id="shopcountry"  style="font-size: 25px;">
          </td>
        </tr>
        <!-- 勾选shipping adresss -->
        <tr >
         <td style="border: 1px solid white;text-align: left;font-size: 25px;" colspan="2">
            <el-checkbox v-model="checked1" >
              Ship to different address...
            </el-checkbox>
         </td>
        </tr>
      </tbody>
    </table>
     <el-button type="success" @click="submitOrder">Submit</el-button>
    <!-- <el-button type="success" @click="submitOrder2">test</el-button> -->
  </div>
  <!--购物车底部组件-->
  <div id="CartBottom">
    <cartbottom />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import catrtop from '../components/CartPageTop.vue';
import cartbottom from '../components/CartPageBottom.vue';
import axios from 'axios';
import apiClient from '@/api/api';
import router from '../router';
// 变量
const checked1 = ref(false);


// 表单数据
const form = reactive({
  cartType: '',      // 信用卡类型
  cartNumber: '',    // 信用卡号
  expiryDate: '',    // 信用卡到期日
  firstName: '',     // 账单名（姓）
  lastName: '',      // 账单名（名）
  address1: '',      // 账单地址1
  address2: '',      // 账单地址2
  city: '',          // 城市
  state: '',         // 州/省
  zip: '',           // 邮编
  country: '',        // 国家
  shopfirstName: '',     // shop账单名（姓）
  shoplastName: '',      // shop账单名（名）
  shopaddress1: '',      // shop账单地址1
  shopaddress2: '',      // shop账单地址2
  shopcity: '',          // shop城市
  shopstate: '',         // shop州/省
  shopzip: '',           // shop邮编
  shopcountry: ''        // shop国家
});
// 订单号
const orderId = ref<number | null>(null);

const submitOrder = async () => {
  try {
    // 1. 先调用后端初始化订单（返回订单ID）
    const initResponse = await apiClient.put('/order');
    const newOrderId = initResponse.data;
    console.log('Order initialized with ID:', newOrderId);
    if (!newOrderId) {
      console.error('Failed to initialize order');
      return;
    }
    orderId.value = newOrderId;

    // 2. 构建请求体，全部表单数据
    const payload = {
      cartType: form.cartType,
      cartNumber: form.cartNumber,
      expiryDate: form.expiryDate,
      firstName: form.firstName,
      lastName: form.lastName,
      address1: form.address1,
      address2: form.address2,
      city: form.city,
      state: form.state,
      zip: form.zip,
      country: form.country,
    };

   // 如果勾选了 shipping address 复选框，添加 shipping 信息
    if (checked1.value) {
      Object.assign(payload, {
        shopfirstName: form.shopfirstName,
        shoplastName: form.shoplastName,
        shopaddress1: form.shopaddress1,
        shopaddress2: form.shopaddress2,
        shopcity: form.shopcity,
        shopstate: form.shopstate,
        shopzip: form.shopzip,
        shopcountry: form.shopcountry,
      });
    }
    
    console.log('Payload to submit:', payload);
    // 4. 发送表单数据到后端接口
    const response = await axios.post(`/api/order/${orderId.value}`, payload);
    console.log('Order submitted successfully:', response.data);

    // 5. 处理响应（例如跳转到成功页或弹窗）
    alert('订单提交成功！');
    // router.push('/order-success'); // 若你想跳转页面

  } catch (error) {
    console.error('Error submitting order:', error);
    alert('订单提交失败，请重试！');
  }
  //跳转订单详情页面
  const router = useRouter();
  router.push('/order')
};

//跳转测试
/*
const submitOrder2 = async () => {
  router.push('/orderconfirm')
}
  */



</script>
<style scoped>
#Catalog {
  margin-top: 15vh;
  margin-bottom: 15vh;

}

table {
  color: black;
}

.double-col {
  flex-wrap: wrap;
}
</style>